 // Sex按钮操作
 const ScreenBtn = {
    main(){
        this.pageBtn();
        this.sexClick();
        this.ageClick();
        this.sortClick();
    },

    // sex绑定事件
    sexClick(){
        const J_sex = document.getElementById('J_sex');
        let sexIndex = 0;

        for(let i = 0,len = J_sex.children.length; i < len ;i++){
            J_sex.children[i].onclick = function(){
                index = 0;
                J_sex.children[sexIndex].classList.remove('active');
                sexIndex = i;
                J_sex.children[sexIndex].classList.add('active');
                Renderer.rendererFn(index, true);
            };
        }
    },

    // age绑定事件
    ageClick(){
        const J_age = document.getElementById('J_age');
        let ageIndex = 0;

        for(let i = 0,len = J_age.children.length; i < len ;i++){
            J_age.children[i].onclick = function(){
                index = 0;
                J_age.children[ageIndex].classList.remove('active');
                ageIndex = i;
                J_age.children[ageIndex].classList.add('active');
                Renderer.rendererFn(index, true);
            };
        }
    },

    // sort绑定事件
    sortClick(){
        const J_sort = document.getElementById('J_sort');
        let sortIndex = 0;
        
        for(let i = 0,len = J_sort.children.length; i < len ;i++){
            J_sort.children[i].onclick = function(){
                index = 0;
                if(sortIndex === i){
                    if(this.dataset.sort == 'asc'){
                        this.dataset.sort = 'desc';
                        this.children[0].className = 'desc';
                    }else{
                        this.dataset.sort = 'asc';
                        this.children[0].className = '';
                    }
                }else{
                    J_sort.children[sortIndex].classList.remove('active');
                    sortIndex = i;
                    J_sort.children[sortIndex].classList.add('active');
                }
        
                Renderer.rendererFn(index, true);
            };
        }
    },

    // 创建分页按钮
    pages(Data){
        // 根据数据长度添加分页个数
        const J_page = document.getElementById('J_page');
        J_page.innerHTML = '';
        const f = document.createDocumentFragment();
        let page = Math.ceil(Data.length / 10);
    
        for(let i = 0; i < page; i++){
            const pageSpan = document.createElement('span');
            i == index && pageSpan.classList.add('active');
    
            const pageText = document.createTextNode(i + 1);
            pageSpan.appendChild(pageText);
            f.appendChild(pageSpan);
        }
        // 写到dom树上
        J_page.appendChild(f);
        this.pageBtnNum();
    },

    // 绑定数字按钮
    pageBtnNum(){
        const J_page = document.getElementById('J_page').children;
        
        // 数字按钮
        for(let i = 0; i < J_page.length; i++){
            J_page[i].onclick = () =>{
                if(index !== i){
                    J_page[index].classList.remove('active');
                    J_page[i].classList.add('active');
                    index = i;
                    Renderer.rendererFn(index, false);
                }
            };
        }
    },

    pageBtn(){
        const J_prev = document.getElementById('J_prev');
        const J_next = document.getElementById('J_next');

        // 上一页
        J_prev.addEventListener('click', () =>{
            if(index){
                J_page.children[index].classList.remove('active');
                index--;
                J_page.children[index].classList.add('active');
                Renderer.rendererFn(index, false);
            }
        });

        // 下一页
        J_next.addEventListener('click', () =>{
            if(index < J_page.children.length - 1){
                J_page.children[index].classList.remove('active');
                index++;
                J_page.children[index].classList.add('active');
                Renderer.rendererFn(index, false);
            }
        });
    }
}